<template>
  <div class="video" :style="style">
    <BaseXgplayer ref="baseXgPlayerRef" :config="config" />
  </div>
</template>

<script setup>
import BaseXgplayer from "./BaseXgplayer";

const { outSidePicture, url, visible } = defineProps({
  outSidePicture: String,
  url: String,
  visible: Boolean,
});

const style = ref({
  width: "300px",
  height: "400px",
});
const config = computed(() => ({
  width: "100%",
  height: "100%",
  closeInactive: true,
  enableContextmenu: true,
  videoInit: true,
  closeFocusVideoFocus: true,
  closePlayVideoFocus: true,
  closePlayerBlur: true,
  ignores: ["replay"],
  defaultMuted: true,
  autoPlay: true,
  autoplayMuted: true,
  loop: false,
  screenShot: false,
  download: false,
  volume: 0.2,
  poster: outSidePicture,
  url,
  playbackRate: [],
}));

function getVideoSize() {
  if (outSidePicture) {
    const img = new Image();
    img.src = outSidePicture;
    img.onload = () => {
      const { width, height } = img;
      style.value = { width: `${width / 3}px`, height: `${height / 3}px` };
    };
  }
}
getVideoSize();

const baseXgPlayerRef = ref(null);

watch(
  () => visible,
  async (value) => {
    if (value) {
      await nextTick();
      const player = baseXgPlayerRef.value?.player;
      if (player) {
        baseXgPlayerRef?.value.play();
      } else {
        baseXgPlayerRef?.value.handleClick();
      }
    } else {
      baseXgPlayerRef?.value.pause();
    }
  },
);
</script>

<style lang="scss" scoped>
.video {
  :deep() {
    .base-xgplayer {
      border-radius: 12px;
      .xgplayer-skin-default {
        border-radius: 12px;
        video {
          border-radius: 10px;
        }
        .xgplayer-controls {
          border-radius: 0 0 10px 10px;
        }
      }
    }
  }
}
</style>
